<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'


// 表单
const emp = ref({ name: '', gender: '', job: '', })

const search = async () => {
    const res = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`)
    empList.value = res.data.data
    console.log(res.data);
}

const clear = () => {
    emp.value = { name: '', gender: '', job: '', }
    search()
}

const empList = ref([])

onMounted(() => {
    search()
})
</script>

<template>
    <div id="container" align="center">
        <!-- 搜索表单 -->
        <div class="mb-4">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" align="center">
                <el-form-item label="姓名">
                    <el-input v-model="emp.name" placeholder="请输入文本" clearable />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="emp.gender" placeholder="请选择性别" clearable>
                        <el-option label="男" value="1" />
                        <el-option label="女" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="职务">
                    <el-select v-model="emp.job" placeholder="请选择职务" clearable>
                        <el-option label="班主任" value="1" />
                        <el-option label="讲师" value="2" />
                        <el-option label="助教" value="3" />
                        <el-option label="副教授" value="4" />
                        <el-option label="教授" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="info" @click="clear">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="mb-4">
            <el-table :data="empList" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="180" />
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column width="130px" label="头像">
                    <template #default="scope">
                        <img :src="scope.row.image" height="50px">
                        <!-- scope的作用是获取当前行的数据，通过scope.row可以获取当前行的所有数据 -->
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="性别">
                    <template #default="scope">
                        {{ scope.row.gender === 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column label="职务" width="180px">
                    <template #default="scope">
                        <span v-if="scope.row.job === 1">班主任</span>
                        <span v-else-if="scope.row.job === 2">讲师</span>
                        <span v-else-if="scope.row.job === 3">助教</span>
                        <span v-else-if="scope.row.job === 4">副教授</span>
                        <span v-else-if="scope.row.job === 5">教授</span>
                    </template>
                </el-table-column>
                <el-table-column prop="entrydate" label="入职时间" width="180" />
                <el-table-column prop="updatetime" label="更新时间" width="180" />
            </el-table>
        </div>
    </div>

</template>

<style scoped>
.mb-4 {
    margin-bottom: 10px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
